<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录 - Qwen 聊天助手</title>
  
  <!-- 导入自定义CSS -->
  <link rel="stylesheet" href="/static/css/login.css" />
  
  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
    
    /* 调整登录窗体大小，位于中间，宽度占据1/3屏幕 */
    .login-container {
      width: 33.33vw; /* 占据1/3屏幕宽度 */
      min-width: 420px; /* 设置最小宽度，确保在小屏幕上不会太窄 */
      padding: 40px;
      margin: 0 auto;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
    
    /* 确保表单元素适应新宽度 */
    .form-input {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 16px;
      font-size: 14px; /* 恢复原来的字体大小 */
    }
    
    /* 优化响应式布局 */
    @media (max-width: 1260px) {
      .login-container {
        width: 420px; /* 在较小屏幕上使用固定宽度 */
      }
    }
    
    @media (max-width: 480px) {
      .login-container {
        width: 90%;
        min-width: auto;
        padding: 30px 20px;
      }
    }
    
    /* 优化按钮和间距，保持原来的字体大小 */
    .login-btn {
      width: 100%;
      margin-top: 10px;
      padding: 12px 20px;
      font-size: 16px; /* 恢复原来的字体大小 */
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    /* 优化社交登录按钮布局 */
    .social-login {
      gap: 15px;
      margin-top: 15px;
    }
    
    .social-btn {
      width: 40px;
      height: 40px;
    }
    
    .social-icon {
      width: 20px;
      height: 20px;
    }
    
    /* 恢复原来的标题大小 */
    .login-title {
      font-size: 24px;
      margin-bottom: 10px;
    }
    
    .login-subtitle {
      font-size: 14px;
    }
    
    /* 整体布局优化 */
    body {
      padding: 0;
      height: 100vh;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    {% raw %}
    <div class="login-container" style="box-sizing: border-box;">
      <div class="login-header">
        <h1 class="login-title">Qwen 聊天助手</h1>
        <p class="login-subtitle">登录您的账户以开始对话</p>
      </div>
      
      <form class="login-form" @submit.prevent="handleLogin">
        <div class="form-group">
          <input 
            type="text" 
            class="form-input" 
            placeholder="用户名或邮箱" 
            v-model="username"
            required
          >
          <div class="error-message" :class="{ 'show': errors.username }">
            {{ errors.username }}
          </div>
        </div>
        
        <div class="form-group">
          <input 
            type="password" 
            class="form-input" 
            placeholder="密码" 
            v-model="password"
            required
          >
          <div class="error-message" :class="{ 'show': errors.password }">
            {{ errors.password }}
          </div>
        </div>
        
        <button 
          type="submit" 
          class="login-btn"
          :disabled="isLoading"
        >
          <span v-if="isLoading">登录中...</span>
          <span v-else>登录</span>
        </button>
      </form>
      
      <div class="login-options">
        <a href="#">忘记密码?</a>
        <a href="#">注册账户</a>
      </div>
      
      <div class="login-divider">
        <span class="login-divider-text">或使用以下方式登录</span>
      </div>
      
      <div class="social-login" style="display: flex; justify-content: center; gap: 25px; margin-top: 15px;">
        <button class="social-btn" title="微信登录">
          <svg class="social-icon" viewBox="0 0 24 24" fill="#07C160">
            <path d="M8.69,11.52c0.34,0,0.58-0.24,0.58-0.59c0-0.34-0.24-0.58-0.58-0.58s-0.67,0.24-0.67,0.58 C8.03,11.28,8.36,11.52,8.69,11.52z M12.78,11.52c0.34,0,0.58-0.24,0.58-0.59c0-0.34-0.24-0.58-0.58-0.58s-0.67,0.24-0.67,0.58 C12.11,11.28,12.44,11.52,12.78,11.52z M14.96,15.11c0-0.24-0.24-0.48-0.48-0.48c-0.1,0-0.19,0.05-0.29,0.1 c-0.96,0.67-2.15,1.1-3.36,1.1c-1.2,0-2.4-0.38-3.36-1.1c-0.1-0.05-0.19-0.1-0.29-0.1c-0.24,0-0.48,0.24-0.48,0.48 c0,0.14,0.05,0.29,0.14,0.38c0.43,0.48,0.96,0.86,1.49,1.15c0.82,0.43,1.68,0.67,2.49,0.67c0.82,0,1.68-0.24,2.49-0.67 c0.53-0.29,1.06-0.67,1.49-1.15C14.91,15.4,14.96,15.26,14.96,15.11z M8.93,15.73c0.24,0,0.43-0.24,0.43-0.48 c0-0.24-0.19-0.48-0.43-0.48s-0.43,0.24-0.43,0.48C8.5,15.5,8.69,15.73,8.93,15.73z M12.5,15.73c0.24,0,0.43-0.24,0.43-0.48 c0-0.24-0.19-0.48-0.43-0.48s-0.43,0.24-0.43,0.48C12.07,15.5,12.26,15.73,12.5,15.73z M19.48,12.93 c0-4.32-4.32-7.83-9.17-7.83c-5.09,0-9.17,3.5-9.17,7.83c0,2.49,1.34,4.75,3.5,6.29c0.05,0.05,0.14,0.1,0.24,0.1 c0.05,0,0.14,0,0.19-0.05l1.15-0.67c0.14-0.1,0.19-0.29,0.1-0.43c-0.1-0.14-0.29-0.19-0.43-0.1l-1.1,0.62 c-1.87-1.34-3.02-3.31-3.02-5.47c0-3.74,3.74-6.77,8.35-6.77c4.61,0,8.35,3.02,8.35,6.77c0,3.74-3.74,6.77-8.35,6.77 c-0.96,0-1.92-0.14-2.83-0.43c-0.14-0.05-0.34,0.05-0.38,0.24c-0.05,0.14,0.05,0.34,0.24,0.38c0.96,0.29,1.97,0.43,2.97,0.43 C15.16,20.76,19.48,17.26,19.48,12.93z"/>
          </svg>
        </button>
        <button class="social-btn" title="QQ登录">
          <svg class="social-icon" viewBox="0 0 24 24" fill="#12B7F5">
            <path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10C22,6.48,17.52,2,12,2z M16.98,15.87 c-0.14,0.41-0.67,0.68-1.08,0.85c-0.41,0.17-0.94,0.28-1.35,0.34c-0.24,0.03-0.46,0.05-0.67,0.06c0.35,0.18,0.57,0.46,0.57,0.78 c0,0.54-0.96,0.98-2.14,0.98c-1.18,0-2.14-0.44-2.14-0.98c0-0.31,0.21-0.59,0.54-0.77c-0.21-0.01-0.43-0.03-0.67-0.06 c-0.41-0.06-0.94-0.17-1.35-0.34c-0.42-0.17-0.94-0.45-1.08-0.85c-0.07-0.2-0.1-0.41-0.08-0.62c0.02-0.2,0.09-0.39,0.22-0.55 c0.13-0.16,0.3-0.29,0.49-0.37c0.09-0.04,0.19-0.07,0.29-0.08c0.09-0.01,0.18-0.01,0.27,0.01c0.09,0.02,0.18,0.05,0.26,0.09 c0.08,0.04,0.16,0.09,0.24,0.15c0.15,0.12,0.29,0.27,0.42,0.43c0.13,0.16,0.25,0.33,0.37,0.5c0.12,0.17,0.23,0.35,0.34,0.53 c0.11,0.18,0.22,0.35,0.34,0.52c0.01,0.01,0.02,0.03,0.03,0.04c0.15-0.04,0.31-0.08,0.47-0.12c0.4-0.1,0.81-0.18,1.22-0.21 c0.41-0.03,0.82-0.03,1.23,0c0.41,0.03,0.82,0.11,1.22,0.21c0.16,0.04,0.32,0.08,0.47,0.12c0.01-0.01,0.02-0.03,0.03-0.04 c0.12-0.17,0.23-0.34,0.34-0.52c0.11-0.18,0.22-0.36,0.34-0.53c0.12-0.17,0.24-0.34,0.37-0.5c0.13-0.16,0.27-0.31,0.42-0.43 c0.08-0.06,0.16-0.11,0.24-0.15c0.08-0.04,0.17-0.07,0.26-0.09c0.09-0.02,0.18-0.02,0.27-0.01c0.1,0.01,0.2,0.04,0.29,0.08 c0.19,0.08,0.36,0.21,0.49,0.37c0.13,0.16,0.2,0.35,0.22,0.55C17.08,15.46,17.05,15.67,16.98,15.87z"/>
          </svg>
        </button>
        <button class="social-btn" title="微博登录">
          <svg class="social-icon" viewBox="0 0 24 24" fill="#E6162D">
            <path d="M20.01,14.82c0,2.79-3.55,6.06-8.93,6.06c-4.93,0-8.92-2.45-8.92-6.06c0-2.79,2.58-6.06,7.36-6.06 c1.91,0,3.53,0.63,4.97,1.75C16.01,11.95,20.01,12.49,20.01,14.82z M14.92,15.43c0-1.88-1.9-3.41-4.25-3.41 c-2.35,0-4.25,1.52-4.25,3.41c0,1.88,1.9,3.41,4.25,3.41C13.02,18.84,14.92,17.31,14.92,15.43z M12.61,16.41 c-0.39,0.53-1.16,0.78-1.88,0.57c-0.71-0.21-0.96-0.8-0.57-1.32c0.39-0.52,1.14-0.77,1.85-0.56 C12.72,15.31,12.99,15.89,12.61,16.41z M10.59,15.97c-0.13,0.17-0.4,0.25-0.61,0.18c-0.22-0.07-0.29-0.26-0.17-0.43 c0.12-0.17,0.39-0.25,0.6-0.18C10.63,15.61,10.71,15.8,10.59,15.97z M19.36,10.56c-0.37,0.53-1.15,0.77-1.73,0.54 c-0.58-0.23-0.74-0.84-0.37-1.36c0.37-0.52,1.13-0.76,1.71-0.53C19.55,9.44,19.73,10.04,19.36,10.56z M21.92,8.65 c-0.16,0.05-0.27,0.08-0.19,0.29c0.19,0.46,0.21,0.86,0.01,1.14c-0.37,0.53-1.4,0.8-2.55,0.03c0,0-0.37-0.16-0.27,0.13 c0.18,0.58,0.15,1.07-0.13,1.35c-0.63,0.63-2.32-0.02-3.77-1.47c-1.08-1.08-1.71-2.23-1.71-2.23c-0.57-0.95-0.49-1.88,0.02-2.39 c0.51-0.51,1.38-0.59,2.3-0.02c0,0,1.1,0.61,2.15,1.66c1.16,1.16,1.88,2.32,1.88,2.32C20.29,9.02,21.09,8.79,21.92,8.65z"/>
          </svg>
        </button>
      </div>
    </div>
    {% endraw %}
  </div>

  <script>
    const { createApp, ref, reactive } = Vue;
    
    // 获取后端传递的API基础URL和错误信息
    const apiBaseUrl = "{{ api_base_url }}";
    const loginError = "{{ login_error|default('') }}";
    
    const app = createApp({
      setup() {
        const username = ref('');
        const password = ref('');
        const isLoading = ref(false);
        const errors = reactive({
          username: loginError || '',
          password: ''
        });
        
        // 将API基础URL暴露给Vue实例
        const baseUrl = ref(apiBaseUrl);
        
        // 检查是否已经存在深色模式设置
        const isDarkMode = localStorage.getItem('darkMode') === 'true';
        if (isDarkMode) {
          document.body.classList.add('dark-mode');
        }
        
        // 处理登录
        const handleLogin = async () => {
          // 重置错误信息
          errors.username = '';
          errors.password = '';
          
          // 简单验证
          if (!username.value.trim()) {
            errors.username = '请输入用户名或邮箱';
            return;
          }
          
          if (!password.value || password.value.length < 6) {
            errors.password = '密码至少需要6个字符';
            return;
          }
          
          // 设置加载状态
          isLoading.value = true;
          
          try {
            // 设置加载状态
            isLoading.value = true;
            
            // 模拟API请求
            await new Promise(resolve => setTimeout(resolve, 1000));
            
            // 前端验证密码是否为123456
            if (password.value === '123456') {
              console.log('登录成功');
              
              // 登录成功，跳转到聊天页面，只携带用户名参数，不传递密码
              const params = new URLSearchParams();
              params.append('username', username.value);
              
              // 将用户名临时存储在sessionStorage中
              sessionStorage.setItem('username', username.value);
              
              // 使用URLSearchParams将参数添加到URL，只包含用户名
              window.location.href = `/api/v1/test/chat?${params.toString()}`;
            } else {
              // 密码错误，显示错误信息
              errors.password = '密码错误，请输入正确的密码（提示：123456）';
              throw new Error('密码错误');
            }
            
          } catch (error) {
            console.error('登录失败:', error);
            errors.username = '登录失败，请检查您的凭据';
          } finally {
            isLoading.value = false;
          }
        };
        
        return {
          username,
          password,
          isLoading,
          errors,
          handleLogin
        };
      }
    });
    
    app.mount('#app');
  </script>
</body>
</html>